<!DOCTYPE html>
<html><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="alternate" type="application/rss+xml" href="/web/index.xml" title="h-book" />
    <link rel="canonical" href="/web/">

    <title>
        
        Web | h-book
        
    </title>

    
    <link href="/css/fontawesome.min.css" rel="stylesheet">

    
    <link rel="stylesheet" href="/css/ace.min.css">

    

    

</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow sticky-top" id="navbarMain">
    <div class="container">
        <div>
            <a class="navbar-brand" href="/">
                
                h-book
            </a>
        </div>
    </div>
</nav>
<div class="container-fluid">
            <div class="row">

                <div class="docs-sidenav order-0 col-12 col-md-3 col-lg-2 col-xl-2 position-sticky border-right"><nav class="navbar navbar-expand-md navbar-light pl-0">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#sidenav-left-collapse" aria-controls="sidenav-left-collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

     <div class="collapse navbar-collapse align-items-start flex-column" id="sidenav-left-collapse">
            <form class="form-inline my-2 my-lg-0 searchbox">
                <input class="form-control mr-sm-2 w-100" data-search-input id="search-by" type="text" placeholder="Search">
            </form>

        

         <ul class="navbar-nav flex-column pt-3">
    <li data-nav-id="/hugo/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/hugo/"><h6>Hugo</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/hugo/init/" class="nav-item my-1">
                
                
                  <a href="/hugo/init/" class="nav-link p-0">
                    init
                  </a>
                
        </li>
        <li data-nav-id="/hugo/add-page/" class="nav-item my-1">
                
                
                  <a href="/hugo/add-page/" class="nav-link p-0">
                    add-page
                  </a>
                
        </li>
        <li data-nav-id="/hugo/edit-skill/" class="nav-item my-1">
                
                
                  <a href="/hugo/edit-skill/" class="nav-link p-0">
                    edit-skill
                  </a>
                
        </li>
        <li data-nav-id="/hugo/publish/" class="nav-item my-1">
                
                
                  <a href="/hugo/publish/" class="nav-link p-0">
                    publish
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/android/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/android/"><h6>Android</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/android/install/" class="nav-item my-1">
                
                
                  <a href="/android/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/android/create-project/" class="nav-item my-1">
                
                
                  <a href="/android/create-project/" class="nav-link p-0">
                    create project
                  </a>
                
        </li>
        <li data-nav-id="/android/import-material/" class="nav-item my-1">
                
                
                  <a href="/android/import-material/" class="nav-link p-0">
                    import material
                  </a>
                
        </li>
        <li data-nav-id="/android/start-page/" class="nav-item my-1">
                
                
                  <a href="/android/start-page/" class="nav-link p-0">
                    startpage
                  </a>
                
        </li>
        <li data-nav-id="/android/i18n/" class="nav-item my-1">
                
                
                  <a href="/android/i18n/" class="nav-link p-0">
                    i18n
                  </a>
                
        </li>
        <li data-nav-id="/android/nav-flat-page/" class="nav-item my-1">
                
                
                  <a href="/android/nav-flat-page/" class="nav-link p-0">
                    nav flat page
                  </a>
                
        </li>
        <li data-nav-id="/android/activity/" class="nav-item my-1">
                
                
                  <a href="/android/activity/" class="nav-link p-0">
                    Activity
                  </a>
                
        </li>
        <li data-nav-id="/android/db/" class="nav-item my-1">
                
                
                  <a href="/android/db/" class="nav-link p-0">
                    DB
                  </a>
                
        </li>
        <li data-nav-id="/android/dialog/" class="nav-item my-1">
                
                
                  <a href="/android/dialog/" class="nav-link p-0">
                    Dialog
                  </a>
                
        </li>
        <li data-nav-id="/android/fragment/" class="nav-item my-1">
                
                
                  <a href="/android/fragment/" class="nav-link p-0">
                    Fragment
                  </a>
                
        </li>
        <li data-nav-id="/android/jetpack/" class="nav-item my-1">
                
                
                  <a href="/android/jetpack/" class="nav-link p-0">
                    Jetpack
                  </a>
                
        </li>
        <li data-nav-id="/android/material/" class="nav-item my-1">
                
                
                  <a href="/android/material/" class="nav-link p-0">
                    Material
                  </a>
                
        </li>
        <li data-nav-id="/android/storage/" class="nav-item my-1">
                
                
                  <a href="/android/storage/" class="nav-link p-0">
                    Storage
                  </a>
                
        </li>
        <li data-nav-id="/android/%E5%9B%BE%E6%A0%87/" class="nav-item my-1">
                
                
                  <a href="/android/%E5%9B%BE%E6%A0%87/" class="nav-link p-0">
                    图标
                  </a>
                
        </li>
        <li data-nav-id="/android/store/" class="nav-item my-1">
                
                
                  <a href="/android/store/" class="nav-link p-0">
                    Store
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/blender/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/blender/"><h6>Blender</h6></a>
        
    </li>
    <li data-nav-id="/bootstrap/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/bootstrap/"><h6>BootStrap</h6></a>
        
    </li>
    <li data-nav-id="/centos7/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/centos7/"><h6>Centos7</h6></a>
        
    </li>
    <li data-nav-id="/dlna/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dlna/"><h6>DLNA</h6></a>
        
    </li>
    <li data-nav-id="/docker/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/docker/"><h6>Docker</h6></a>
        
    </li>
    <li data-nav-id="/dubbo/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dubbo/"><h6>Dubbo</h6></a>
        
    </li>
    <li data-nav-id="/ffmpeg/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/ffmpeg/"><h6>FFmpeg</h6></a>
        
    </li>
    <li data-nav-id="/git/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/git/"><h6>Git</h6></a>
        
    </li>
    <li data-nav-id="/gitbook/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gitbook/"><h6>Gitbook</h6></a>
        
    </li>
    <li data-nav-id="/gitlab/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/gitlab/"><h6>Gitlab</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/gitlab/runner/" class="nav-item my-1">
                
                
                  <a href="/gitlab/runner/" class="nav-link p-0">
                    Runner
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/gradle/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gradle/"><h6>Gradle</h6></a>
        
    </li>
    <li data-nav-id="/java/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/java/"><h6>Java</h6></a>
        
    </li>
    <li data-nav-id="/jenkins/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/jenkins/"><h6>Jenkins</h6></a>
        
    </li>
    <li data-nav-id="/kubernetes/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/kubernetes/"><h6>Kubernetes</h6></a>
        
    </li>
    <li data-nav-id="/mybatis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis/"><h6>Mybatis</h6></a>
        
    </li>
    <li data-nav-id="/mybatis-plus/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis-plus/"><h6>Mybatis Plus</h6></a>
        
    </li>
    <li data-nav-id="/mysql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mysql/"><h6>MySQL</h6></a>
        
    </li>
    <li data-nav-id="/nodejs/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/nodejs/"><h6>Node.js</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/nodejs/npm/" class="nav-item my-1">
                
                
                  <a href="/nodejs/npm/" class="nav-link p-0">
                    NPM
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/postgresql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/postgresql/"><h6>PostgreSQL</h6></a>
        
    </li>
    <li data-nav-id="/redis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/redis/"><h6>Redis</h6></a>
        
    </li>
    <li data-nav-id="/samba/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/samba/"><h6>Samba</h6></a>
        
    </li>
    <li data-nav-id="/sql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/sql/"><h6>SQL</h6></a>
        
    </li>
    <li data-nav-id="/ue5/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/ue5/"><h6>UE5</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/ue5/install/" class="nav-item my-1">
                
                
                  <a href="/ue5/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/ue5/uninstall/" class="nav-item my-1">
                
                
                  <a href="/ue5/uninstall/" class="nav-link p-0">
                    uninstall
                  </a>
                
        </li>
        <li data-nav-id="/ue5/qa/" class="nav-item my-1">
                
                
                  <a href="/ue5/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity/"><h6>Unity</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity/install/" class="nav-item my-1">
                
                
                  <a href="/unity/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/unity/scene/" class="nav-item my-1">
                
                
                  <a href="/unity/scene/" class="nav-link p-0">
                    scene
                  </a>
                
        </li>
        <li data-nav-id="/unity/inspector/" class="nav-item my-1">
                
                
                  <a href="/unity/inspector/" class="nav-link p-0">
                    inspector
                  </a>
                
        </li>
        <li data-nav-id="/unity/assets/" class="nav-item my-1">
                
                
                  <a href="/unity/assets/" class="nav-link p-0">
                    assets
                  </a>
                
        </li>
        <li data-nav-id="/unity/audio-source/" class="nav-item my-1">
                
                
                  <a href="/unity/audio-source/" class="nav-link p-0">
                    audio source
                  </a>
                
        </li>
        <li data-nav-id="/unity/camera/" class="nav-item my-1">
                
                
                  <a href="/unity/camera/" class="nav-link p-0">
                    camera
                  </a>
                
        </li>
        <li data-nav-id="/unity/script/" class="nav-item my-1">
                
                
                  <a href="/unity/script/" class="nav-link p-0">
                    script
                  </a>
                
        </li>
        <li data-nav-id="/unity/prefabs/" class="nav-item my-1">
                
                
                  <a href="/unity/prefabs/" class="nav-link p-0">
                    prefabs
                  </a>
                
        </li>
        <li data-nav-id="/unity/physics/" class="nav-item my-1">
                
                
                  <a href="/unity/physics/" class="nav-link p-0">
                    physics
                  </a>
                
        </li>
        <li data-nav-id="/unity/skybox/" class="nav-item my-1">
                
                
                  <a href="/unity/skybox/" class="nav-link p-0">
                    skybox
                  </a>
                
        </li>
        <li data-nav-id="/unity/particle-system/" class="nav-item my-1">
                
                
                  <a href="/unity/particle-system/" class="nav-link p-0">
                    particle system
                  </a>
                
        </li>
        <li data-nav-id="/unity/shortcut-keys/" class="nav-item my-1">
                
                
                  <a href="/unity/shortcut-keys/" class="nav-link p-0">
                    shortcut keys
                  </a>
                
        </li>
        <li data-nav-id="/unity/qa/" class="nav-item my-1">
                
                
                  <a href="/unity/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-beginner/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-beginner/"><h6>Unity 2D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-beginner/init-and-move/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/init-and-move/" class="nav-link p-0">
                    Init &amp; Move
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/map/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/map/" class="nav-link p-0">
                    Map
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/data/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/data/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/animate/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/animate/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/bullet/" class="nav-link p-0">
                    Bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/cinemachine/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/cinemachine/" class="nav-link p-0">
                    Cinemachine
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/particle/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/particle/" class="nav-link p-0">
                    Particle
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/npc/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/npc/" class="nav-link p-0">
                    NPC
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-game-kit/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-game-kit/"><h6>Unity 2D Game Kit</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-game-kit/record/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-game-kit/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-3d-beginner/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-3d-beginner/"><h6>Unity 3D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-3d-beginner/init/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/level/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/level/" class="nav-link p-0">
                    Level
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/nav/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/nav/" class="nav-link p-0">
                    Nav
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/render-pipeline/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/render-pipeline/" class="nav-link p-0">
                    Render Pipeline
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/postprocessing/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/postprocessing/" class="nav-link p-0">
                    PostProcessing
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/enemy/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/enemy/" class="nav-link p-0">
                    Enemy
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-link p-0">
                    建模工具
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-arpg/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-arpg/"><h6>Unity ARPG</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-arpg/init/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/role-state-machine/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/role-state-machine/" class="nav-link p-0">
                    Role State Machine
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/api-piece/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/api-piece/" class="nav-link p-0">
                    API Piece
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-animation/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-animation/"><h6>Unity Creativecore Animation</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-animation/door/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/door/" class="nav-link p-0">
                    Door
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-animation/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-lighting/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-lighting/"><h6>Unity Creativecore Lighting</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-lighting/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-lighting/outdoor/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/outdoor/" class="nav-link p-0">
                    Outdoor
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-shader/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-shader/"><h6>Unity Creativecore Shader</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-shader/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/glass/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/glass/" class="nav-link p-0">
                    Glass
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/shader-graph/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/shader-graph/" class="nav-link p-0">
                    Shader-Graph
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-beginner-code/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-beginner-code/"><h6>Unity Creator Kit Beginner Code</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-beginner-code/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-beginner-code/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-fps/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-fps/"><h6>Unity Creator Kit FPS</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-fps/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-fps/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-mythirdperson/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-mythirdperson/"><h6>Unity My Third Person</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-mythirdperson/init/" class="nav-item my-1">
                
                
                  <a href="/unity-mythirdperson/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-playground/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-playground/"><h6>Unity Playground</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-playground/record/" class="nav-item my-1">
                
                
                  <a href="/unity-playground/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-ui/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-ui/"><h6>Unity UI</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-ui/init/" class="nav-item my-1">
                
                
                  <a href="/unity-ui/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-vfx/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-vfx/"><h6>Unity VFX</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-vfx/init/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/bullet/" class="nav-link p-0">
                    bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rain/" class="nav-link p-0">
                    rain
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rock-rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rock-rain/" class="nav-link p-0">
                    Rock Rain
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/vue/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/vue/"><h6>Vue</h6></a>
        
    </li>
    <li data-nav-id="/web/" class="nav-item my-1 active
        ">
        
        
          <a class="nav-link p-0" href="/web/"><h6>Web</h6></a>
        
    </li>
        </ul>
    </div>
</nav>


</div>
                <div class="docs-toc large order-lg-2 order-md-0 order-xs-1 col-12 col-lg-2 col-xl-2 position-sticky border-left"><div class="docs-toc">
	<nav id="TableOfContents"></nav>
</div>
</div>
                <div class="main col-12 order-1 col-md-9 col-lg-10 col-xl-8 py-3">
                

<div class="d-flex flex-column">
    <h1 class="js-title">Web</h1>
    <div class="d-flex align-items-center">
        
    </div>
</div>

<hr>


<p>HTML CSS JS</p>
<ol>
<li>css盒模型</li>
</ol>
<p>HTML页面中都可以看成是一个盒子</p>
<p>盒子有内边距、外边距、内容、边框</p>
<p>盒子的类型:标准盒子模型 margin+border+padding+content</p>
<p>IE盒模型margin+content（border+padding）</p>
<p>box-sizing：content-box 标准盒模型 默认值</p>
<p>box-sizing：border-box IE盒模型</p>
<ol start="2">
<li>CSS优先级</li>
</ol>
<p>特性：继承性、层叠性、优先级</p>
<p>!important、行类（style）、id、类/伪类/属性（class）、标签（div）、全局（*）</p>
<ol start="3">
<li>隐藏元素的方法</li>
</ol>
<ul>
<li>display：none 元素在页面上消失，不会保留空间</li>
<li>opacity：0 透明度，保留空间</li>
<li>visibility：hidden 元素在页面上，保留空间</li>
<li>position：absolute</li>
</ul>
<ol start="4">
<li>px和rem区别</li>
</ol>
<ul>
<li>px像素</li>
<li>rem相对单位，相对于html根节点的font-size的值，62.5%  -&gt; 1rem = 10px  ==  16px*62.5%=10px</li>
</ul>
<ol start="5">
<li>重绘和重排</li>
</ol>
<ul>
<li>重排（回流）：布局引擎会根据样式计算出和模型在页面上的位置和大小</li>
<li>重绘：计算好盒模型的位置、大小和其它一些属性之后，浏览器会根据每个盒模型特性进行绘制（颜色、内容、阴影）</li>
</ul>
<ol start="6">
<li>BFC</li>
</ol>
<p>一个独立的元素，内部不会影响到外部，避免外边距重叠</p>
<ul>
<li>html标签本身</li>
<li>position：absolute/fixed</li>
<li>display：inline-block table-cell</li>
<li>float：left | right</li>
<li>overflow：hidden | auto 或 scroll</li>
</ul>
<ol start="7">
<li>清除浮动</li>
</ol>
<p>加一个div clear：both</p>
<p>或者在::before ::after上加一个组合拳</p>
<p>父元素设置高度或者添加overflow</p>
<ol start="8">
<li>浏览器的渲染机制</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-txt" data-lang="txt"><span style="display:flex;"><span>HTML-&gt;解析-&gt;DOM树
</span></span><span style="display:flex;"><span>                                   结合两树-&gt;渲染树（会重排）-&gt;重绘
</span></span><span style="display:flex;"><span>CSS-&gt;解析-&gt;style树
</span></span></code></pre></div><ol start="9">
<li>水平垂直居中</li>
</ol>
<ul>
<li>定位（父元素相对，子元素绝对+4向0，各自有宽高）+margin（auto）</li>
<li>定位（父元素相对，子元素绝对+top 50% left 50% transfrom -50% -50%，各自有宽高）+transfrom 性能优于margin</li>
<li>flex</li>
<li>grid</li>
<li>table</li>
</ul>
<ol start="10">
<li>CSS哪些属性可以继承？哪些不行？</li>
</ol>
<p>子元素可以继承父的字体、文本、元素可见性、表格布局（border-spacing）、列表（list-style）</p>
<ol start="11">
<li>预处理器</li>
</ol>
<ul>
<li>sass/scss</li>
<li>less</li>
<li>stylus</li>
</ul>
<ol start="12">
<li>CSS</li>
</ol>
<p>加载CSS不影响dom树解析，影响渲染树和后面的js</p>
<p>用cdn、gzip、缓存、合并优化加载速度</p>
<ol start="13">
<li>移动端1像素</li>
</ol>
<ul>
<li>媒体查询，查device-pixel-ratio，如果是2，就写0.5px，如果是3，就写0.33px   兼容性差，ios &gt;= 8 才支持，大部分Android显示0PX</li>
<li>transform scale 0.5</li>
</ul>
<ol start="14">
<li>JS由哪三部分组成</li>
</ol>
<ul>
<li>ESMAScript（核心，基础）</li>
<li>DOM(文档，Document)</li>
<li>BOM（浏览器，navigation）</li>
</ul>
<ol start="15">
<li>内置对象</li>
</ol>
<p>String（concat slice提取字串 split） Boolean Number Array Object Function Math（abs绝对值 sqrt平方） Date（getYear） RegExp</p>
<ol start="16">
<li>操作数组</li>
</ol>
<p>push pop sort splice shift unshift reverse concat join map filter every some reduce isArray findIndex</p>
<p>哪些会改变原数组push pop shift unshift sort reverse</p>
<ol start="17">
<li>检测类型</li>
</ol>
<ul>
<li>typeof 适用于基本数据类型：number string boolean object</li>
<li>instance of 适用于引用数据类型：Array String 用function、class定义的类型 返回的是true false</li>
<li>constructor (&lsquo;ab&rsquo;).constructor === String 如果声明了一个构造函数，并把它的原型指向了Array时，该方法无法</li>
<li>Object.prototype.toString.call   var opt = Object.prototype.toString；console.log(opt.call(2/true/&lsquo;aa&rsquo;/[]/{}）</li>
</ul>
<ol start="18">
<li>闭包</li>
</ol>
<p>函数嵌套函数，内部函数被外部函数返回并保留下来时，会产生闭包 / 可以访问其他函数内部定义的变量的函数</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">fn</span><span style="color:#960050;background-color:#1e0010">（</span><span style="color:#75af00">a</span><span style="color:#960050;background-color:#1e0010">）</span><span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">num</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#00a8c8">function</span><span style="color:#960050;background-color:#1e0010">（）</span><span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">console</span><span style="color:#111">.</span><span style="color:#75af00">log</span><span style="color:#111">(</span><span style="color:#75af00">num</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#75af00">a</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">var</span> <span style="color:#00a8c8">of</span> <span style="color:#f92672">=</span> <span style="color:#75af00">fn</span><span style="color:#111">(</span><span style="color:#d88200">&#39;abcd&#39;</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">of</span><span style="color:#111">()</span>
</span></span></code></pre></div><p>会一直保存到内存中，不会被垃圾回收机制回收，除非 of = null</p>
<ol start="19">
<li>内存泄露</li>
</ol>
<p>分配内存地址对象后，长时间没有释放或清楚，长期占用内存，导致运行速度慢，甚至崩溃</p>
<p>垃圾回收机制无法回收</p>
<p>一些未声明直接赋值的变量；未清空的定时器；过度的闭包；引用元素没有被清除</p>
<ol start="20">
<li>事件委托（事件代理）</li>
</ol>
<p>子元素的事件绑定到父元素，如果子元素阻止了事件冒泡，那么就不会委托</p>
<p>event.stopPropagation  阻止</p>
<p>addEventListener(&lsquo;click&rsquo;,函数名,true/false) 默认是fasle会冒泡，true事件捕获</p>
<ol start="21">
<li>数据类型</li>
</ol>
<ul>
<li>原生 String Number Boolean undefined null 保存在栈内存中，保存具体的值</li>
<li>引用 Object Function Array 保存在堆内存中，保存的内存地址</li>
</ul>
<ol start="22">
<li>原型链</li>
</ol>
<p>原型是一个普通的对象，为构造函数的实例共享属性和方法：所有实例中引用的原型都是同一个对象</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">Person</span><span style="color:#111">()</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">this</span><span style="color:#111">.</span><span style="color:#75af00">say</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">function</span><span style="color:#111">()</span> <span style="color:#111">{</span> <span style="color:#75af00">console</span><span style="color:#111">.</span><span style="color:#75af00">log</span><span style="color:#111">()</span> <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">var</span> <span style="color:#75af00">p1</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">new</span> <span style="color:#75af00">Person</span><span style="color:#111">()</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">var</span> <span style="color:#75af00">p2</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">new</span> <span style="color:#75af00">Person</span><span style="color:#111">()</span>
</span></span></code></pre></div><p>在没有使用原型的情况下，每个一个对象中都会有独立的say方法，一旦数量上去了，内存会浪费很多</p>
<p>所以用原型来共享Persion.prototype.look = function() { console.log }</p>
<p><code>__proto__</code>会指向构造函数的原型prototype  &mdash; <code>p1.__proto__ === Person.prototype</code></p>
<p>原型链：实例本身、构造函数原型、原型的原型</p>
<p>Person的__proto__是Object，再往上是null</p>
<ol start="23">
<li>new操作符具体做了什么</li>
</ol>
<p>创建空对象</p>
<p>把空对象和构造函数通过原型链进行链接</p>
<p>把构造函数的this绑定到新的空对象上</p>
<p>根据构建函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型</p>
<p>示意代码</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">myNew</span><span style="color:#960050;background-color:#1e0010">（</span><span style="color:#75af00">Fun</span><span style="color:#960050;background-color:#1e0010">，</span> <span style="color:#111">...</span><span style="color:#75af00">args</span><span style="color:#960050;background-color:#1e0010">）</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">newObj</span> <span style="color:#f92672">=</span> <span style="color:#111">{}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">newObj</span><span style="color:#111">.</span><span style="color:#75af00">__proto__</span> <span style="color:#f92672">=</span> <span style="color:#75af00">Fun</span><span style="color:#111">.</span><span style="color:#75af00">prototype</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">const</span> <span style="color:#75af00">result</span> <span style="color:#f92672">=</span> <span style="color:#75af00">Fun</span><span style="color:#111">.</span><span style="color:#75af00">apply</span><span style="color:#111">(</span><span style="color:#75af00">newObj</span><span style="color:#111">,</span> <span style="color:#75af00">args</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#75af00">result</span> <span style="color:#00a8c8">instanceof</span> <span style="color:#111">Object</span> <span style="color:#f92672">?</span> <span style="color:#75af00">result</span> <span style="color:#f92672">:</span> <span style="color:#75af00">newObj</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="24">
<li>如何实现继承</li>
</ol>
<ul>
<li>原型链  Child.prototype = new Parent 优点是简单、缺点是共享所有，无法给父类传参</li>
<li>借用构造函数  子类构造函数中调用父类构造函数，使用apply call，将父对象构造函数绑定在子对象上 function Child（arg） { Parent.call(this, arg) } 有点是可为父传参，缺点是不能函数复用，在父类原型中的方法，对子类不可见</li>
<li>组合继承  原型链+借用构造函数  优点是解决上面两种的缺点，缺点是会调用两次父类的构造函数</li>
<li>ES6的class extends</li>
</ul>
<ol start="25">
<li>JS设计原理</li>
</ol>
<p>JS引擎V8  运行上下文  调用栈   事件循环   回调</p>
<ol start="26">
<li>this指向问题</li>
</ol>
<p>全局中的this指向window</p>
<p>普通函数的this指向window</p>
<p>this永远指向最后调用它的那个对象（在不是箭头函数的情况下）</p>
<p>new会改变this指向</p>
<p>apply、call、bind可以改变指向，传的那个对象</p>
<p>箭头函数中的this，在定义时就已经确定了，箭头函数它没有this，要看外层是否有函数</p>
<p>匿名函数永远指向window</p>
<ol start="27">
<li>script标签中的async和defer</li>
</ol>
<p>当没有时，会立即加载和执行</p>
<p>有async时（谁先下好就运行谁），加载和渲染后面元素的过程将和script的加载和执行并行（异步）</p>
<p>有defer时（保证顺序），加载和渲染后面元素的过程将和script的加载并行（异步），但是它的执行事件要等到所有元素解析完毕后才会执行（相当于header中的放入到了body的底部）</p>
<ol start="28">
<li>最小执行时间</li>
</ol>
<ul>
<li>setTimeout 4ms</li>
<li>setInterval 10ms</li>
</ul>
<ol start="29">
<li>ES5和ES6区别</li>
</ol>
<ul>
<li>2009年 ESMAScript2009</li>
<li>2015年 ESMAScript2015</li>
</ul>
<ol start="30">
<li>ES6新特性</li>
</ol>
<ul>
<li>let const 不存在变量提升（没声明前是不能使用的）、存在暂时性死区、块级作用域、同一作用域中不能重复声明</li>
<li>class</li>
<li>原生数据类型symbol</li>
<li>解构赋值</li>
<li>函数参数默认值</li>
<li>给数组新增API   reduce</li>
<li>对向和数组扩展运算符</li>
<li>Promise  解决回调地狱，有all，reject，resolve，race，原型上有then，catch方法，把异步操作队列化。三种状态，pending，fulfilled，rejected</li>
<li>新增模块化import export</li>
<li>Set 不重复</li>
<li>Map key的类型不受限制</li>
<li>generator</li>
<li>箭头函数  不能作为构造函数，即不能new，没有原型，没有arguments，不能用call，apply，bind去改变this。this指向外层第一个函数的this</li>
</ul>
<ol start="31">
<li>ES7新特性</li>
</ol>
<p>async、await</p>
<ol start="32">
<li>call，apply，bind区别</li>
</ol>
<ul>
<li>共同点是改变this指向和函数的调用</li>
<li>call和apply的区别在于传参数的方法不一样</li>
<li>call传的是参数列表，apply是一个数组</li>
<li>bind传参后不会立即执行，会返回一个改变this指向的函数，这个函数也可以传参数</li>
<li>call性能比apply好</li>
</ul>
<ol start="33">
<li>递归时候遇到的问题</li>
</ol>
<p>函数内调用本函数 要有退出条件</p>
<ol start="34">
<li>深拷贝</li>
</ol>
<ul>
<li>扩展运算符 let obj1 = {&hellip;obj} 只有第一层是拷贝，多层是浅拷贝</li>
<li>JSON.parse(JSON.stringfy()) 不能拷贝方法</li>
<li>利用递归：</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">exten</span><span style="color:#111">(</span><span style="color:#75af00">origin</span><span style="color:#111">,</span> <span style="color:#75af00">deep</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">obj</span> <span style="color:#f92672">=</span> <span style="color:#111">{}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">origin</span> <span style="color:#00a8c8">instanceof</span> <span style="color:#111">Array</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">obj</span> <span style="color:#f92672">=</span> <span style="color:#111">[]</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">key</span> <span style="color:#00a8c8">in</span> <span style="color:#75af00">origin</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">let</span> <span style="color:#75af00">value</span> <span style="color:#f92672">=</span> <span style="color:#75af00">origin</span><span style="color:#111">[</span><span style="color:#75af00">key</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">obj</span><span style="color:#111">[</span><span style="color:#75af00">key</span><span style="color:#111">]</span> <span style="color:#f92672">=</span> <span style="color:#111">(</span><span style="color:#f92672">!!</span><span style="color:#75af00">deep</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#00a8c8">typeof</span> <span style="color:#75af00">value</span> <span style="color:#f92672">===</span> <span style="color:#d88200">&#39;object&#39;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#75af00">value</span> <span style="color:#f92672">!==</span> <span style="color:#00a8c8">null</span><span style="color:#111">)</span> <span style="color:#f92672">?</span> <span style="color:#75af00">exten</span><span style="color:#111">(</span><span style="color:#75af00">value</span><span style="color:#111">,</span> <span style="color:#75af00">deep</span><span style="color:#111">)</span> <span style="color:#f92672">:</span> <span style="color:#75af00">value</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#75af00">obj</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="35">
<li>事件循环</li>
</ol>
<p>执行栈    主线程（同步任务）   任务队列（异步任务）   宏任务（同步任务执行完后会执行异步任务，setTimeout  setInterval ajax DOM事件 requestAnimationFrame）   微任务（同步任务执行完后会执行异步任务，优先级大于宏任务，promise async/await 对Dom变化监听的MutationObserver）</p>
<ol start="36">
<li>ajax</li>
</ol>
<p>不用重新加载整个网页的前提下，与服务器交换数据</p>
<p>XMLHTTPRequest对象</p>
<p>创建对象 -&gt; open()方法和服务器建立连接 -&gt; send()方法将数据发送给服务器 -&gt; 通过onreadysatate changes事件，监听服务器和客户端的通信状态 -&gt; 接受服务的响应结果</p>
<ol start="37">
<li>get post区别</li>
</ol>
<p>get用于获取、post用于提交</p>
<p>get参数在url上，post在body上</p>
<p>get请求刷新服务器或退回是没有影响的，post会重新提交</p>
<p>get会缓存，post不会缓存</p>
<ol start="38">
<li>promise原理，优缺点</li>
</ol>
<p>是一个对象，创建时候需要接受两个函数类型的参数（resolve和reject），有三种状态，初始为pending，resolve和reject会改为fulfilled和rejected状态，原型上有then  catch方法，封装了一个异步操作并且还可以获取成果或失败的结果</p>
<p>一旦创建会立即执行，如果不设置回调，内部就会抛出警告，若处于pending状态时，无法得知目前是哪个阶段</p>
<ol start="39">
<li>promise和async await区别</li>
</ol>
<p>都是处理异步请求的方式</p>
<p>ES6和ES7</p>
<p>后者是基于前者实现的</p>
<p>promise是返回对象，用then和catch去处理异常，书写方式是链式调用，容易造成代码重叠，不好维护
async await是通过try catch去处理异常，能让代码写起来像同步一样，遇到await就会立即返回结果，然后执行后面的</p>
<ol start="40">
<li>浏览器的存储方式</li>
</ol>
<ul>
<li>cookies H5标准前的存储方式，兼容性好，请求头自带，但300个，每个站点20个，一个存储量4KB，每个请求都会携带造成流量浪费，需要封装</li>
<li>localstorage H5标准，永久存储，兼容性好，5MB，但保存值类型有限定，隐私模式下不可读取，不能被爬虫</li>
<li>sessionstorage H5标准，当前页面关闭后就会立刻清理</li>
<li>indexedDB H5标准，数据库，键值存取</li>
</ul>
<ol start="41">
<li>token存在localstorage还是sessionstorage</li>
</ol>
<p>token是账密登陆后，服务端把登录的凭证加密后的字符串，</p>
<p>存localstorage时候，需要在请求时去读出来，添加到请求中。容易被XSS（是跨站脚本攻击(Cross Site Scripting)）攻击（恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的），但是做好措施，比cookie好</p>
<p>存cookie会自动发送。会CSRF攻击</p>
<ol start="42">
<li>token登录流程</li>
</ol>
<p>客户端账密登录AES/HASH加密</p>
<p>服务端与数据库验证</p>
<p>服务端签发一个token给客户端</p>
<p>客户端存下来</p>
<p>客户端每次请求时携带token</p>
<p>服务端验证token</p>
<ol start="43">
<li>页面渲染</li>
</ol>
<p>DNS解析</p>
<p>TCP连接</p>
<p>HTTP请求</p>
<p>服务器处理请求</p>
<p>渲染页面 下载html、css文件，解析为DOM和CSSOM树，合并为渲染树，重排，重绘</p>
<p>断开TCP连接</p>
<ol start="44">
<li>DOM树和渲染树的区别</li>
</ol>
<p>DOM是和HTML标签对应</p>
<p>渲染树不包含head和隐藏元素</p>
<ol start="45">
<li>精灵图和base64区别</li>
</ol>
<p>精灵图是把多个图合并到一张大图，利用定位的一些属性，把小图显示到页面上，减少请求次数</p>
<p>base64是把8bit字节代码编码，把原本二进制转为64个字符单位，组成字符串，随html css一起下载，减少请求次数，若base64体积比原图大，不利于css加载</p>
<ol start="46">
<li>svg</li>
</ol>
<p>基于XML语法格式的图像格式，可缩放适量图</p>
<p><code>&lt;svg&gt;&lt;/svg&gt;</code>插入到HTML中，可用js或css操作或者<code>&lt;img src='xxx.svg' /&gt;</code></p>
<p>svg可以转为base64引入页面</p>
<ol start="47">
<li>jwt</li>
</ol>
<p>相比的是session</p>
<p>json web token 通过json形式作为在web应用中的令牌，可以在各方之间安全的把信息作为json对象传输</p>
<p>信息传输、授权</p>
<p>Header（头部）、Payload（有效载荷）、Signature（签名），用点（.）将三部分隔开便是 JWT 的结构，形如xxxxx.yyyyyy.zzzzz的字符串</p>
<p>alg加密算法+typ固定JWT、iss发行人+exp到期时间+sub主题+aud用户+自定义字段</p>
<p>流程：</p>
<ul>
<li>前端把账密发给后端</li>
<li>后端验证账密成功后，把用户id等其他信息作为jwt负载，把它和头部分别进行base64编码拼接后签名，形成一个token</li>
<li>前端每次请求会把jwt放在http的请求头Authorization字段内</li>
<li>后端验证有效性（签名正确、token过期）</li>
<li>验证通过后使用jwt中的用户信息进行其他操作，返回结果</li>
</ul>
<ol start="48">
<li>npm底层环境</li>
</ol>
<p>node package manager，包管理器，分发模块的标准</p>
<ol start="49">
<li>http协议头和请求头</li>
</ol>
<p>请求头</p>
<ul>
<li>accept浏览器告诉服务器支持的数据类型、</li>
<li>host想访问服务器的哪台主机</li>
<li>referer从哪里来（防盗链）</li>
<li>user-agent用的浏览器版本信息</li>
<li>date访问时间</li>
<li>connection连接方式</li>
<li>cookie</li>
<li>x-request-with请求方式</li>
<li>content-length请求数据量</li>
<li>content-type请求的数据类型</li>
</ul>
<p>响应头</p>
<ul>
<li>location告诉浏览器取找谁</li>
<li>server服务器的类型</li>
<li>content-type</li>
<li>refresh控制定时刷新</li>
<li>cache-control控制缓存</li>
</ul>
<ol start="50">
<li>缓存策略</li>
</ol>
<p>强缓存（本地缓存，不发起请求，直接使用缓存里的内容，js css image等存到内存或者磁盘）、弱缓存（协商缓存）
先检查强缓存，发起请求，判断是否使用弱缓存，如果请求的内容没有变化，则返回304，浏览器就用缓存的内容</p>
<p>强缓存触发</p>
<ul>
<li>1.0 时间戳响应标头 Expires</li>
<li>1.1 cache-control</li>
</ul>
<p>协商缓存</p>
<ul>
<li>1.0 请求头if-modified-since 响应头last-modified</li>
<li>1.1 请求头 if-none-match 响应头 Etag</li>
</ul>
<ol start="51">
<li>同源策略</li>
</ol>
<p>协议 域名 端口号 都相同才是同源，防止网络攻击。不一样就会有跨域，</p>
<p>img link script可以支持跨域请求</p>
<p>解决跨域 jsonp    cors                                websocket    反向代理</p>
<pre><code>   用script  用access-control-allow-origin/xxx   不存在问题        nginx
</code></pre>
<ol start="52">
<li>防抖和节流</li>
</ol>
<p>页面中频繁触发事件的优化</p>
<p>防抖是避免事件重复触发，防止用户频繁点击按钮，向服务器提交数据；输入框自动查询。几秒内只触发一次</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">debounce</span><span style="color:#111">(</span><span style="color:#75af00">fun</span><span style="color:#111">,</span> <span style="color:#75af00">wait</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">timer</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#111">(...</span><span style="color:#75af00">args</span><span style="color:#111">)</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">timer</span><span style="color:#111">)</span> <span style="color:#75af00">clearTimer</span><span style="color:#111">(</span><span style="color:#75af00">timer</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">timer</span> <span style="color:#f92672">=</span> <span style="color:#75af00">setTimeout</span><span style="color:#111">(()</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span> <span style="color:#75af00">fun</span><span style="color:#111">(...</span><span style="color:#75af00">args</span><span style="color:#111">)</span> <span style="color:#111">},</span> <span style="color:#75af00">wait</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><p>节流减少频繁触发的次数，每隔一段时间执行一次，scroll事件</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">throttle</span><span style="color:#111">(</span><span style="color:#75af00">fun</span><span style="color:#111">,</span> <span style="color:#75af00">wait</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">timer</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#111">(...</span><span style="color:#75af00">args</span><span style="color:#111">)</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">timer</span><span style="color:#111">)</span> <span style="color:#00a8c8">return</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">else</span> <span style="color:#75af00">timer</span> <span style="color:#f92672">=</span> <span style="color:#75af00">setTimeout</span><span style="color:#111">(()</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span> <span style="color:#75af00">timer</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">null</span><span style="color:#111">;</span> <span style="color:#75af00">fun</span><span style="color:#111">(...</span><span style="color:#75af00">args</span><span style="color:#111">)},</span> <span style="color:#75af00">wait</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="53">
<li>json</li>
</ol>
<p>一种纯字符串形式的数据，本身不提供任何方法、函数，适合在网络中传输</p>
<p>定义接口、序列化、生成token</p>
<ol start="54">
<li>当数据没有请求过来的时候，该怎么做</li>
</ol>
<ul>
<li>渲染数据的地方给默认值</li>
<li>做loading界面</li>
<li>补全超时的流程</li>
</ul>
<ol start="55">
<li>无感登录</li>
</ol>
<p>在响应器中拦截，判断token过期，过期后调用刷新token的接口（登录成功时候会额外返回一个刷新的token）</p>
<p>后端返回过期时间，前端判断token过期时间，去调用刷新token接口</p>
<p>写定时器，定时刷新token</p>
<ol start="56">
<li>大文件上传</li>
</ol>
<p>分片上传，把上传的文件，按照一定规则，分割成相同大小的数据库。向服务器开启一个上传任务，服务器会返回一个id，按照一定的规则把各个数据库上传。服务器判断完整性，完整才会合并</p>
<p>断点续传，服务端返回从哪里开始，浏览器自己处理</p>
<ol start="57">
<li>HTML5语义化</li>
</ol>
<p>HTML页面结构时所用的标签是意义 head、main、foot、aside</p>
<ol start="58">
<li>H5C3新特性</li>
</ol>
<p>语义化标签、video、radio标签、canvas、数据存储（xxxstorage）、表单控件 email url search 、拖拽释放API</p>
<p>属性选择器、伪类选择器、伪元素选择器、媒体查询、阴影、box-sizing、渐变、过度、动画、背景的属性、2d和3d</p>
<ol start="59">
<li>rem如何做适配</li>
</ol>
<p>html的font-size 62.5% ，配合媒体查询，屏幕的宽度，再来改变这个百分比</p>
<ol start="60">
<li>移动端兼容问题</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-txt" data-lang="txt"><span style="display:flex;"><span>当设置样式overflow：scroll/auto时， IOS上的滑动会卡顿       -webkit-overflow-scrolling：touch
</span></span><span style="display:flex;"><span>在安卓下placeholder文字设置行高时会偏上       input有placeholder属性的时候，不要设置行高
</span></span><span style="display:flex;"><span>移动端字体小于12px异常显示     应该先把整体放大一倍，然后再用transform进行缩小
</span></span><span style="display:flex;"><span>ios下input按钮设置了disabled属性为true显示异常     input[type=button] { opcity: 1 }
</span></span><span style="display:flex;"><span>安卓手机下取消语音输入按钮    input::-webkit-input-speech-button { display: none }
</span></span><span style="display:flex;"><span>ios取消input输入框在输入英文首字母默认大写     &lt;input autocapitalize=&#39;off&#39; autocorrect=&#39;off&#39; /&gt;
</span></span><span style="display:flex;"><span>禁用iso和安卓用户选中文字        * { -webkit-user-select: none }
</span></span><span style="display:flex;"><span>禁止ios弹出各种窗口      * { -webkit-touch-callout: none }
</span></span><span style="display:flex;"><span>禁止ios识别长传数字为电话     添加meta属性  &lt;meta conten=&#39;telephone=no&#39; name=&#39;format-detection&#39;&gt;
</span></span><span style="display:flex;"><span>html5标签在低版本浏览器如何兼容 使用html5shiv.js  &lt;!-- [if lt ie 9]&lt;script src=&#34;shiv.js&#34;&gt;&lt;/script&gt;&lt;![endif]&gt;
</span></span><span style="display:flex;"><span>h5底部输入框被键盘遮挡 var oHeight = $(document).height() // 浏览器当前的高度 $(window).resize(function() { if $(document).height() &lt; oHeight $(&#34;footer&#34;).css(&#34;position&#34;, &#34;static&#34;) else position absolute})
</span></span><span style="display:flex;"><span>click事件有300ms延迟 禁止双击缩放 meta:user-scalabel = no ; 用fastclick.js if (&#34;addEventListener&#34; in document) { document.addEventListener(&#39;DOMContentLoaded&#39;, function() { FashClick.attach(document.body) }, false)}
</span></span><span style="display:flex;"><span>touch事件穿透 e.preventDeafult 阻止默认行为; 用 fastclick.js
</span></span><span style="display:flex;"><span>懒加载问题 如果懒加载插件在某个盒子中执行，但这个盒子有滚动效果，那么需要加入属性 $(&#34;img.lazy&#34;).lazload({container: $(&#34;section&#34;)}) // 加入cantainer它的值是盾冬的父盒子
</span></span><span style="display:flex;"><span>1px问题  用伪类元素模拟边框并使用transform缩放
</span></span><span style="display:flex;"><span>消除 transition 闪屏 -webkit-transform-style: preserve-3d; -webikt-backface-visibility: hidden; 
</span></span><span style="display:flex;"><span>audio和video无法自动播放 $(&#39;html&#39;).one(&#39;touchstart&#39;, function() { auto.play() })
</span></span><span style="display:flex;"><span>fixed定位缺陷 ios下fixed容易粗错，软键盘弹出时，影响fixed元素 ios4下不支持 position:fixed 可用iScroll插件
</span></span><span style="display:flex;"><span>android中line-height不居中 把字号外边距等设置为需求的2倍，再用zoom缩小
</span></span><span style="display:flex;"><span>ios日期转换为NaN 用new Date(&#34;2020/11/12 00:00:00&#34;)
</span></span><span style="display:flex;"><span>禁止数字识别电话号码 &lt;meta name = &#34;format-detection&#34; content = &#34;telephone=no&#34;&gt;
</span></span></code></pre></div><ol start="61">
<li>weakset和set区别</li>
</ol>
<p>weakset成员只能是对象，对象是弱引用，如果对象没有再引用会被回收，不可遍历，没有size属性，存dom节点</p>
<ol start="62">
<li>weakmap和map区别</li>
</ol>
<p>weakmap只接受对象作为键值，对象是弱引用，如果对象没有再引用会被回收，可不遍历，没有key value entries等，无法清空。仅四个方法，get set has delete</p>
<ol start="63">
<li>es6 字符串新方法</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-txt" data-lang="txt"><span style="display:flex;"><span>`` includes indexOf startWith endWith
</span></span></code></pre></div><ol start="64">
<li>es6 数组新方法</li>
</ol>
<ul>
<li>Array.from 将类数组（set map）转成数组</li>
<li>Array.of 将一组值转成数组   Array.of(3,11,2)</li>
<li>Array.fill 填充数组</li>
<li>find  findIndex</li>
<li>entryes keys values</li>
<li>includes</li>
<li>flat 扁平化 flatMap 只能展开一层数组</li>
</ul>
<ol start="65">
<li>es6 新增拓展</li>
</ol>
<ul>
<li>Object.keys</li>
<li>Reflect.ownKeys</li>
<li>Object.is</li>
<li>Object.assign 复制到目标对象，浅拷贝</li>
<li>Generator 异步编程解决方案，迭代器生成函数，调用不会立即执行，返回一个迭代器，可以进行异步调用，支持挂起操作：</li>
<li>function* myxxx() {}</li>
<li>yield 定义不同的内部状态</li>
</ul>
<ol start="66">
<li>
<p>commonjs模块运行时加载 es6编译时输出接口，commonjs 同步加载，es6 异步加载，commonjs 对模块浅拷贝，es6 只存只读不能改变其值（指针指向不能变）</p>
</li>
<li>
<p>虚拟dom提供跨平台能力，用js对象的属性，描述节点，与真实的dom做映射。 {tag，attrs，children}</p>
</li>
<li>
<p>PWA 渐进式网页 2014年草案 2015年chrome支持</p>
</li>
</ol>
<p>渐进式 可响应式 可离线 可实现类似app的交互 即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接</p>
<p>不是特指一种技术 应用了多项技术 app manifest service worker webpush</p>
<ol start="69">
<li>promise值穿透是什么</li>
</ol>
<p>.then .catch 期望的是函数，如果是非函数就会发生值穿透，会保存为上一个promise的data，并且都是resovle</p>
<ol start="70">
<li>延迟加载js</li>
</ol>
<p>defer  async  动态创建script dom setTimeout包裹 放在最后</p>
<ol start="71">
<li>函数式编程</li>
</ol>
<p>更好的状态管理 无状态 ； 固定输入得到固定输出，无副作用；更优雅的组合；减少代码量 提高维护性</p>
<p>过度包装，产生上下文切换的开销，对垃圾回收有压力，迭代和递归操作有陷阱</p>
<ol start="72">
<li>ssr</li>
</ol>
<p>服务端渲染html给客户端，但交互能力有限，实现复杂交互，还需要引入js</p>
<ol start="73">
<li>自定义unshift</li>
</ol>
<p>原型链上新增方法，用arguments接收入参，并用for遍历，从后往前，调用数组的this.splice(0,0,item)，返回this.length</p>
<ol start="74">
<li>数组去重</li>
</ol>
<p>原型链上新增方法，return Array.form(new Set(this))</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">arr</span> <span style="color:#f92672">=</span> <span style="color:#111">[]</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span><span style="color:#111">;</span> <span style="color:#75af00">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#00a8c8">this</span><span style="color:#111">.</span><span style="color:#75af00">length</span><span style="color:#111">;</span> <span style="color:#75af00">i</span><span style="color:#f92672">++</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#f92672">!</span><span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">includes</span><span style="color:#111">(</span><span style="color:#00a8c8">this</span><span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">]))</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">push</span><span style="color:#111">(</span><span style="color:#00a8c8">this</span><span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">]);</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#75af00">arr</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#00a8c8">this</span><span style="color:#111">.</span><span style="color:#75af00">filter</span><span style="color:#111">((</span><span style="color:#75af00">v</span><span style="color:#111">,</span> <span style="color:#75af00">idx</span><span style="color:#111">)</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#00a8c8">this</span><span style="color:#111">.</span><span style="color:#75af00">indexOf</span><span style="color:#111">(</span><span style="color:#75af00">v</span><span style="color:#111">,</span> <span style="color:#ae81ff">0</span><span style="color:#111">)</span> <span style="color:#f92672">===</span> <span style="color:#75af00">idx</span>
</span></span><span style="display:flex;"><span><span style="color:#111">})</span>
</span></span></code></pre></div><ol start="75">
<li>指定范围内的随机数</li>
</ol>
<p>return Math.round(Math.random() * (max - min -2) + min + 1) // 四舍五入</p>
<p>return Math.round(Math.random() * (max - min) + min)</p>
<p>return Math.ceil(Math.random() * (max - min) + min) // 向上取整</p>
<p>return Math.floor(Math.random() * (max - min) + min) // 向下取整</p>
<ol start="76">
<li>100以内质数</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">count</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">2</span><span style="color:#111">;</span> <span style="color:#75af00">i</span> <span style="color:#f92672">&lt;=</span> <span style="color:#ae81ff">100</span><span style="color:#111">;</span> <span style="color:#75af00">i</span><span style="color:#f92672">++</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">j</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span><span style="color:#111">;</span> <span style="color:#75af00">j</span> <span style="color:#f92672">&lt;=</span> <span style="color:#75af00">i</span><span style="color:#111">;</span> <span style="color:#75af00">j</span><span style="color:#f92672">++</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">i</span><span style="color:#f92672">%</span> <span style="color:#75af00">j</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">0</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>      <span style="color:#75af00">count</span><span style="color:#f92672">++</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// 从1开始，到自身都%完，1 和 自身整除 count === 2
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">count</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">2</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">console</span><span style="color:#111">.</span><span style="color:#75af00">log</span><span style="color:#111">(</span><span style="color:#75af00">count</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">count</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="77">
<li>提取url的参数</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">url</span> <span style="color:#f92672">=</span> <span style="color:#d88200">&#34;https://a.b.com?a=1&amp;b=2&amp;c=3#hash&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">const</span> <span style="color:#75af00">ps</span> <span style="color:#f92672">=</span> <span style="color:#75af00">url</span><span style="color:#111">.</span><span style="color:#75af00">spilt</span><span style="color:#111">(</span><span style="color:#d88200">&#34;?&#34;</span><span style="color:#111">)[</span><span style="color:#ae81ff">1</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">cosnt</span> <span style="color:#75af00">urlSearchParams</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">new</span> <span style="color:#75af00">URLSearchParams</span><span style="color:#111">(</span><span style="color:#75af00">ps</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">cosnt</span> <span style="color:#75af00">params</span> <span style="color:#f92672">=</span> <span style="color:#111">Object</span><span style="color:#111">.</span><span style="color:#75af00">fromEntries</span><span style="color:#111">(</span><span style="color:#75af00">urlSearchParams</span><span style="color:#111">.</span><span style="color:#75af00">entries</span><span style="color:#111">())</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#75af00">params</span>
</span></span></code></pre></div><ol start="78">
<li>数组随机排序</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span><span style="color:#111">;</span> <span style="color:#75af00">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">length</span><span style="color:#111">;</span> <span style="color:#75af00">i</span><span style="color:#f92672">++</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">randomIndex</span> <span style="color:#f92672">=</span> <span style="color:#111">parseInt</span><span style="color:#111">(</span><span style="color:#111">Math</span><span style="color:#111">.</span><span style="color:#75af00">random</span><span style="color:#111">()</span> <span style="color:#f92672">*</span> <span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">length</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">curNum</span> <span style="color:#f92672">=</span> <span style="color:#75af00">arr</span><span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">arr</span><span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">]</span> <span style="color:#f92672">=</span> <span style="color:#75af00">arr</span><span style="color:#111">[</span><span style="color:#75af00">randomIndex</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">arr</span><span style="color:#111">[</span><span style="color:#75af00">randomIndex</span><span style="color:#111">]</span> <span style="color:#f92672">=</span> <span style="color:#75af00">curNum</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>                <span style="color:#75af00">OR</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">sort</span><span style="color:#111">(()</span> <span style="color:#111">=&gt;</span> <span style="color:#111">Math</span><span style="color:#111">.</span><span style="color:#75af00">random</span><span style="color:#111">()</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">0.5</span><span style="color:#111">)</span>
</span></span></code></pre></div><ol start="79">
<li>迭代方法实现flatten</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">let</span> <span style="color:#75af00">arr</span> <span style="color:#f92672">=</span> <span style="color:#111">[</span><span style="color:#ae81ff">1</span><span style="color:#111">,</span><span style="color:#ae81ff">2</span><span style="color:#111">,</span> <span style="color:#111">[</span><span style="color:#ae81ff">3</span><span style="color:#111">,</span><span style="color:#ae81ff">4</span><span style="color:#111">,</span><span style="color:#ae81ff">5</span><span style="color:#111">],</span> <span style="color:#111">[</span><span style="color:#ae81ff">6</span><span style="color:#111">,</span><span style="color:#ae81ff">7</span><span style="color:#111">],</span> <span style="color:#ae81ff">8</span><span style="color:#111">,</span> <span style="color:#ae81ff">9</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">while</span><span style="color:#111">(</span><span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">some</span><span style="color:#111">(</span><span style="color:#75af00">v</span> <span style="color:#111">=&gt;</span> <span style="color:#111">Array</span><span style="color:#111">.</span><span style="color:#75af00">isArray</span><span style="color:#111">(</span><span style="color:#75af00">v</span><span style="color:#111">))</span> <span style="color:#111">{</span> <span style="color:#75af00">数组中有数组</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">arr</span> <span style="color:#f92672">=</span> <span style="color:#111">[].</span><span style="color:#75af00">concat</span><span style="color:#111">(...</span><span style="color:#75af00">arr</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">return</span> <span style="color:#75af00">arr</span>
</span></span><span style="display:flex;"><span>                <span style="color:#75af00">OR</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">function</span> <span style="color:#75af00">flatten</span><span style="color:#111">(</span><span style="color:#75af00">arr</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#111">[].</span><span style="color:#75af00">concat</span><span style="color:#111">(...</span><span style="color:#75af00">arr</span><span style="color:#111">.</span><span style="color:#75af00">map</span><span style="color:#111">(</span><span style="color:#75af00">v</span> <span style="color:#111">=&gt;</span> <span style="color:#111">(</span><span style="color:#111">Array</span><span style="color:#111">.</span><span style="color:#75af00">isArray</span><span style="color:#111">(</span><span style="color:#75af00">v</span><span style="color:#111">)</span> <span style="color:#f92672">?</span> <span style="color:#75af00">flatten</span><span style="color:#111">(</span><span style="color:#75af00">v</span><span style="color:#111">)</span> <span style="color:#f92672">:</span> <span style="color:#75af00">v</span><span style="color:#111">)))</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="80">
<li>两数之和</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#00a8c8">const</span> <span style="color:#75af00">nums</span> <span style="color:#f92672">=</span> <span style="color:#111">[</span><span style="color:#ae81ff">2</span><span style="color:#111">,</span><span style="color:#ae81ff">7</span><span style="color:#111">,</span><span style="color:#ae81ff">11</span><span style="color:#111">,</span><span style="color:#ae81ff">15</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">const</span> <span style="color:#75af00">target</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">9</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">funtion</span> <span style="color:#75af00">twoSum</span><span style="color:#111">(</span><span style="color:#75af00">nums</span><span style="color:#111">,</span> <span style="color:#75af00">target</span><span style="color:#111">){</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span><span style="color:#111">;</span> <span style="color:#75af00">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#75af00">nums</span><span style="color:#111">.</span><span style="color:#75af00">length</span><span style="color:#111">;</span> <span style="color:#75af00">i</span><span style="color:#f92672">++</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">const</span> <span style="color:#75af00">num</span> <span style="color:#f92672">=</span> <span style="color:#75af00">num</span><span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">const</span> <span style="color:#75af00">targetIndex</span> <span style="color:#f92672">=</span> <span style="color:#75af00">nums</span><span style="color:#111">.</span><span style="color:#75af00">indexOf</span><span style="color:#111">(</span><span style="color:#75af00">target</span> <span style="color:#f92672">-</span> <span style="color:#75af00">num</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">targetIndex</span> <span style="color:#f92672">&gt;</span> <span style="color:#f92672">-</span><span style="color:#ae81ff">1</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#75af00">targetIndex</span> <span style="color:#f92672">!=</span> <span style="color:#75af00">i</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>      <span style="color:#00a8c8">return</span> <span style="color:#111">[</span><span style="color:#75af00">i</span><span style="color:#111">,</span> <span style="color:#75af00">targetIndex</span><span style="color:#111">]</span>
</span></span><span style="display:flex;"><span>    <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">console</span><span style="color:#111">.</span><span style="color:#75af00">log</span><span style="color:#111">(</span><span style="color:#75af00">towSum</span><span style="color:#111">(</span><span style="color:#75af00">nums</span><span style="color:#111">,</span> <span style="color:#75af00">target</span><span style="color:#111">))</span>  <span style="color:#75715e">// [0, 1]
</span></span></span></code></pre></div>

    


                    
                    <div class="row"></div> 

                </div>

            </div> 

        </div> 
<script src="/lib/jquery.min.js"></script> 
<script src="/lib/popper.min.js"></script> 

<script src="/js/bootstrap.min.js"></script> 


<script type="text/javascript" src="/plugins/lunr.min.js"></script>
<script type="text/javascript" src="/plugins/auto-complete.js"></script>
<link href="/plugins/auto-complete.css" rel="stylesheet">
<script type="text/javascript">
  
      var baseurl = "\/";
  
</script>
<script type="text/javascript" src="/plugins/search.js"></script>

<script type="text/javascript" src="/plugins/favorites.js"></script>


<script type="text/javascript" src="/plugins/clipboard.js"></script>
<script>
  new ClipboardJS('.btn');
</script>
</body>
</html>
